<template>
	<div class="page">
		<el-card class="box-card">
			<div slot="header" class="clearfix">
			    <span class="card-title">{{cardInfo.STICKETNAMECH}}</span>
			    <span class="timeOut" v-if="cardInfo.OVERTIME !== '未超时'">超时{{infoData.productInfo.OVERTIME}}分钟（{{computedTime(infoData.productInfo.OVERTIME)}}）</span>
			</div>
			<div class="head-text" v-if="infoData.productInfo">入园时长：{{infoData.productInfo.STAYTIME}}</div>
		</el-card>
		<div class="divider">
			<div class="divider-item"></div>
			<div class="divider-text">升级时长</div>
			<div class="divider-item"></div>
		</div>
		<div :class="i == 0 ? 'upgrade sanshi' : 'upgrade liushi'" v-for="item,i of timeoutSchemeList" :key="i">
			<div class="leftContent">
				<div class="title">{{item.TIMEOUTDURATION}}</div>
				<div class="price">￥{{item.TIMEOUTAMOUNT}}</div>
			</div>
			<div class="rigth">
				<el-input-number
				:disabled="item.disable"
				@input="changeAmount(item)"
				:style="i !== 0 ? 'margin-top: 30px;' : ''" 
				v-model="item.amount" 
				:min="0"
				:max="1"
				size="small"></el-input-number>
			</div>
		</div>
			<div class="waitPay">
				<div class="content">
					<span class="text">待支付：</span>
					<span class="price">{{sum}} 元</span>
				</div>
			</div>
			<div class="btn-list">
				<el-button class="detail-Info" @click="back">返回</el-button>
				<el-button class="pay" @click="goPay">去支付</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapMutations,mapGetters } from "vuex";
	export default {
		data () {
			return {
				total : 0,
				TIMGEAR_ID : "",
				cardInfo : {},
				timeoutSchemeList : [],
				timelength1 : {
					UnitPrice : 30,
					amount : 0,
				},
				infoData : {},
				timelength2 : {
					UnitPrice : 60,
					amount : 0,
				}
			}
		},
		activated () {
			this.GetUpGradeProductInfo();
		},
		created () {
			this.cardInfo = JSON.parse(sessionStorage.getItem("cardDetailInfo"));
			this.GetUpGradeProductInfo();
		},
		computed : {
			sum () {
				let num = 0;
				this.timeoutSchemeList.forEach(item=>{
					num += item.amount * item.TIMEOUTAMOUNT;
				});
				return num;
			},
		},
		methods : {
			computedTime (time) {
				if (time) {
					let num = time / 60;
					num = num.toFixed(1);
					return num + "小时"
				} else {
					return time;
				}
			},
			GetUpGradeProductInfo () {
				this.axios.post("/IceCardSelfHelp/GetUpGradeProductInfo",{
					sourceType : 1,
					strBatchNo : this.cardInfo.NBATCHNO
				}).then(res=>{
					if (res.resStatusInfo.resultCode == "200") {
						res.timeoutSchemeList.forEach(item=>{
							item.amount = 0;
							item.disable = false;
						});
						this.infoData = res;
						this.timeoutSchemeList = res.timeoutSchemeList;
					} else {
						this.$message.error(res.resStatusInfo.errReason);
					}
				});
			},
			changeAmount (item) {
				this.timeoutSchemeList.forEach(items=>{
					if (items.TIMGEAR_ID !== item.TIMGEAR_ID && !items.amount && item.amount !== 0) {
						items.disable = true;
					} else if (item.amount === 0) {
						items.disable = false;
					}
				});
			},
			goPay () {
				if (this.timeoutSchemeList.every(item=>!item.amount)) {
					this.$message({
						message : "请选择购买数量",
						type : "warning",
						showClose : true
					});
					return;
				}
				let obj = {
					SourceType : 1,
					StrBatchNo : this.cardInfo.NBATCHNO,
				}
				this.timeoutSchemeList.map(item=>{
					if (item.amount) {
						obj.StrTimeGearId = item.TIMGEAR_ID;
						obj.IntTimGearCount = item.amount;
					}
				});
				sessionStorage.setItem("OrderInfo",JSON.stringify(obj));
				this.$router.push({
					name : "Pay",
					query : {
						OVERTIME : this.infoData.productInfo.OVERTIME,
						STAYTIME : this.infoData.productInfo.STAYTIME,
					}
				});
			},
			back () {
				this.$router.back();
			}
		},
	}
</script>

<style lang="scss" scoped="scoped">
	.page {
		padding: 10px;
	}
	.divider{
		margin-top: 25px;
		display: flex;
		justify-content: space-around;
		.divider-item {
			width: 100px;
			height: 1px;
			background: #5B9BBA;
		}
		.divider-text {
			margin-top: -10px;
			font-size: 15px;
			font-weight: bold;
			color: #00306D;
		}
	}
	.head-text {
		font-size: 12px;
		color: #333;
	}
	.card-title {
		color: #333;
		font-weight: bold;
		font-size: 15px;
	}
	.timeOut {
		float: right;
		font-size: 14px;
		color: #E30204;
		font-weight: bold;
	}
	.upgrade {
		display: flex;
		height: 62px;
		padding: 14px;
		margin-top: 18px;
		background: #FFFFFF;
		border: 1px solid #1CC5BE;
		align-items: center;
		border-radius: 9px;
		.leftContent {
			flex: 2;
			.title {
				font-family: Microsoft YaHei;
				font-size: 14px;
				color: #333;
				font-weight: 400;
				line-height: 11px;
			}
			.price {
				margin-top: 10px;
				font-size: 16px;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #E30204;
			}
		}
		.rigth {
			border-radius: 0px 9px 9px 0px;
		}
	}
	.upgrade.liushi {
		padding: 14px 0px 14px 14px;
		background: #42B983;
		background-size: 200px 10px;
		background-position: left;
		.leftContent {
			.title {
				font-size: 14px;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 11px;
			}
			.price {
				color: #E6F600;
			}
			border-top-left-radius: 9px;
			border-bottom-left-radius: 9px;
		}
		.rigth {
			padding-left: 5px;
			background: #fff;
			width: 144px;
			height: 92px;
			border-radius: 0px 9px 9px 0px;
		}
	}
	.waitPay {
		text-align: right;
		.text {
			font-size: 12px;
			font-weight: bold;
			color: #00306D;
			line-height: 62px;
		}
		.price {
			font-size: 18px;
			font-weight: bold;
			color: #E30204;
			line-height: 62px;
		}
	}
	.btn-list {
		display: flex;
		justify-content: center;
	}
	.btn-list button {
		border: none;
		width: 132px;
		height: 35px;
		font-size: 15px;
		font-weight: bold;
		line-height : 0px
	}
	.detail-Info {
		margin-right: 22px;
		background: url(../../assets/bluebg.png);
		background-size: 100% 100%;
		color: #FFEA00;
	}
	.btn-list .pay {
		background: url(../../assets/yellowbg.png);
		background-size: 100% 100%;
		color: #00306D;
	}
</style>
